import { useState } from "react"

export default function InitialDrill() {
    // 1. useState 是react hook最常用的新特性，它允许程序员给组件添加一个状态变量
    // 下面是使用useState的简单示范
    const initValue = {
        number: 0,
        string: 'abc',
        bool: true,
        obj: {
            a: '旧属性'
        },
        arr: [],
        fun: function initFun() {
            return '旧函数'
        },
        anoFun: () => { },
    }
    let [numberState, setNumberState] = useState(initValue.number)
    let [stringState, setStringState] = useState(initValue.string)
    let [boolState, setBoolState] = useState(initValue.bool)
    let [objState, setObjState] = useState(initValue.obj)
    let [arrState, setArrState] = useState(initValue.arr)
    let [funState, setFunState] = useState(initValue.fun)

    function numberF() {
        setNumberState(numberState + 1)
    }

    function stringF() {
        setStringState('新的字符串')
    }

    function boolF() {
        setBoolState(!boolState)
    }

    function objF() {
        setObjState({ a: '新属性' })
    }

    function arrF() {
        setArrState(['新索引', '索引2'])
    }

    function funF() {
        function newF() {
            return '新函数'
        }
        setFunState(newF)
    }

    function resize() {
        setNumberState(initValue.number)
        setStringState(initValue.string)
        setBoolState(initValue.bool)
        setObjState(initValue.obj)
        setFunState(initValue.fun)
    }

    return (
        <div>
            初始演练：
            <button onClick={numberF}>数字{numberState}</button>
            <button onClick={stringF}>字符串{stringState}</button>
            <button onClick={boolF}>
                <span><input type={"checkbox"} checked={boolState} onChange={boolF} /></span>
                <span>布尔值{boolState}</span>
            </button>
            <button onClick={objF}>
                对象{objState.a}
            </button>
            <button onClick={arrF}>
                数组{arrState}
            </button>
            <button onClick={funF}>
                函数{funState}
            </button>
            <button onClick={resize}>恢复</button>
        </div>
    )
}